<template>
  <div>
    <goga-header title="用户注册">
      <div slot="left">
        <span @click="goBack">
          <icon symbol="back"> </icon>
        </span>
      </div>
    </goga-header>
    <div class="form-wrapper">
      <form>
        <section class="form-group">
          <input type="text" placeholder="请输入手机号" v-model.trim="model.uPhone">
        </section>
        <section class="form-group">
          <input type="text" placeholder="验证码" v-model.trim="model.rzCod">
          <button class="btn-count" v-bind:disabled="sendDisable || codeWait!==0" @click.prevent="sendCod">
            {{sendCodText}}
          </button>
        </section>
        <section class="form-group">
          <input v-if="!showPwd" type="password" placeholder="请输入密码" v-model.trim="model.uPwd">
          <input v-if="showPwd" type="text" placeholder="请输入密码" v-model.trim="model.uPwd">
          <div class="xxcf-switch">
            <input class="xxcf-switch-core" type="checkbox" id="isDefault" v-model="showPwd">
          </div>
        </section>
        <div class="link"><a href="">&nbsp;</a></div>
        <div class="btn-group">
          <button class="btn btn-default" @click.prevent="submit" v-bind:disabled="disabled">用户注册</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script lang="babel">
  import api from '@api'
  import gogaHeader from '@components/goga-header'
  import {validate} from '@utils'
  import Icon from '@components/icon'
  export default {
    components: {
      gogaHeader,
      Icon
    },
    data () {
      return {
        sendDisable: true,
        codeWait: 0,
        sendCodText: '获取验证码',
        model: {
          uPhone: '',
          uPwd: '',
          rzCod: ''
        },
        showPwd: false,
        disabled: false
      }
    },
    watch: {
      'model.uPhone': function (newValue) {
        this.sendDisable = !validate.mobile(newValue) && this.codeWait == 0
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      async sendCod () {
        let _this = this;
        this.codeWait = 60;
        this.codeTimer()
        let {data: {StatusCode, Status}} = await api.post('api/v1/LogReg/phoneVerification.ashx', {
          uPhone: this.model.uPhone,
          VerificationType: 'phoneVerificate'
        })
        if (StatusCode === '403') {
          this.$store.dispatch('global/toast', Status);
          this.codeWait = 0
        }
      },
      codeTimer: function () {
        let _this = this;
        if (this.codeWait === 0) {
          this.sendCodText = '获取验证码';
        } else {
          this.sendCodText = `${this.codeWait}秒`;
          this.codeWait--;
          setTimeout(function () {
            _this.codeTimer();
          }, 1000)
        }
      },
      updataCodPic: function () {
        let url = 'http://www.gogagoga.cc/api/verCode/tpcode.ashx?='
        this.codPic = url + Math.random()
      },
      async submit() {
        if (!validate.mobile(this.model.uPhone)) {
          this.$store.dispatch('global/toast', '请输入正确的手机号码');
          return false;
        }
        if (!validate.minLength(this.model.uPwd, 6)) {
          this.$store.dispatch('global/toast', '请输入密码');
          return false;
        }
        if (!validate.minLength(this.model.rzCod, 1)) {
          this.$store.dispatch('global/toast', '请输入验证码');
          return false;
        }
        this.disabled = true;
        let {data: {StatusCode, Status}, headers: {token}} = await api.post('api/v1/LogReg/reg.ashx', Object.assign(this.model, {invite: ''}));
        if (StatusCode === '200') {
          this.$store.dispatch('global/toast', '注册成功，请登录');
          this.goBack()
        } else if (StatusCode === '403') {
          this.$store.dispatch('global/toast', Status);
        }
        this.disabled = false;
      }
    }
  }
</script>

<style lang="less">
  @import "index.less";
</style>